<template>
  <div class="login-container">
    <div class="logo-box">
      <div id="logo_bg"> <!-- LOGO --> </div>
      <div class="text-box">
        <div class="clique-Chinese">呼伦贝尔农垦集团</div>
        <div class="clique-English">Hulun Buir State Farm</div>
      </div>
    </div>
    <div class="login-form el-page">
      <div class="login-left">
        <svg-icon class="svg-icon" icon-class="loginLeft" />
      </div>
      <div class="login-right">
        <div class="tips">呼伦贝尔农垦团仓储信息化管理平台</div>
        <div class="login-line">用户登录</div>
        <el-input placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="loginForm.username">
        </el-input>
        <el-input show-password placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="loginForm.password">
        </el-input>
        <el-checkbox v-model="checked">记住密码</el-checkbox>
        <div class="button">
          <el-button class="primary" type="primary" :loading="loading" @click="handleLogin" @keydown.13="handleLogin">登 录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { validUsername } from '@/utils/validate'
import { getAccount, setAccount, removeAccount, setUserKey } from '@/utils/auth'
export default {
  name: 'Login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error('Please enter the correct user name'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('The password can not be less than 6 digits'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: getAccount() ? JSON.parse(getAccount()).username : '',
        password: getAccount() ? JSON.parse(getAccount()).password : ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      checked: Boolean(localStorage.getItem('checked')) || false,
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      if (!this.loginForm.username || !this.loginForm.password) {
        this.$message.error('请输入账号密码！');
        return
      }
      this.loading = true
      this.$router.push({ path: '/index' })
      this.$store.dispatch('user/login', this.loginForm).then(() => {
        if (this.checked) {
          localStorage.setItem('checked', this.checked)
          setAccount(JSON.stringify(this.loginForm))
        } else {
          localStorage.removeItem('checked')
          removeAccount()
        }
        setUserKey(this.loginForm.username)
        location.reload()
        // this.$router.push({ path: this.redirect || '/index' })
        this.$router.push({ path: '/index' })
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  },
}
</script>

<style lang="scss" scoped>
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #fff;

.login-container {
  min-height: 100%;
  min-width: 100%;
  overflow: hidden;
  background-image: url(../../assets/login/login-bg.png);
  background-size: 100% 100%;

  .logo-box {
    width: 346px;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;

    #logo_bg {
      width: 82px;
      height: 79px;
      margin: 20px;
      background: url(../../assets/login/logo_bg.png);
      background-size: 100% 100%;
    }

    .text-box {
      color: #fff;

      .clique-Chinese {
        font-size: 28px;
      }

      .clique-English {
        margin-top: 20px;
      }
    }
  }

  .login-form {
    width: 1150px;
    height: 550px;
    margin: 280px auto 0;
    overflow: hidden;
    background-color: $light_gray;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .login-left {
      width: 460px;
      height: 400px;
      text-align: center;

      .svg-icon {
        width: 460px;
        height: 400px;
      }
    }

    .login-right {
      width: 400px;
      height: 400px;
      // background-color: #ff0;
      box-sizing: border-box;

      .tips {
        font-size: 32px;
        text-align: center;
        text-shadow: 0 0 8px #444;
      }

      .login-line {
        margin: 10px 0;
        font-size: 15px;
      }

      .el-input {
        margin: 10px 0;
        height: 50px;
      }

      ::v-deep .el-input__inner {
        height: 50px;
        padding: 0 15px 0 50px;
      }

      /* 修改图标的大小和颜色 */
      ::v-deep .el-input .el-input__icon {
        font-size: 28px;
        /* 修改图标大小 */
        color: #000;
        /* 修改图标颜色 */
        font-weight: 500;
        margin-left: 10px;
        margin-top: 5px;
      }



      .el-checkbox {
        margin: 10px 0;
      }

      .el-button--primary {
        margin-top: 20px;
        width: 100%;
        height: 50px;
        font-size: 24px;
        background: #1891ff;
        border-color: #1891ff;

        &:hover,
        &:focus {
          background: #1891ff !important;
          border-color: #1891ff !important;
          color: #fff !important;
        }
      }
    }
  }


  ::v-deep .el-input .el-input__clear {
    font-size: 20px !important;
    color: #93989c !important;
  }
}
</style>
